<template>
  <div class="indexDialog">
    <el-dialog
      :title="title"
      :visible="visible"
      width="860px"
      @close="$emit('close')"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
          {{ data.ruleStatus == 0 ? '待激活' : '已激活' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 规则适用区域 </template>
          杭州市
        </el-descriptions-item>
      </el-descriptions>
      <div class="rules">
        <el-form
          :model="form"
          ref="form"
          :rules="{}"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <div v-for="(item, index) in ruleList" :key="index">
            <el-form-item label="预警阀值" required>
              <el-row :gutter="10">
                <el-col :span="6" :offset="0">
                  <el-select v-model="item.dateType" clearable filterable>
                    <el-option
                      v-for="item in options_time"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" :offset="0">
                  <el-select v-model="item.eventType" clearable filterable>
                    <el-option
                      v-for="item in options_event"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="3" :offset="0">预测数量满足</el-col>
                <el-col :span="5" :offset="0">
                  <el-input v-model="item.num" clearable>
                    <template slot="append">件</template>
                  </el-input>
                </el-col>
                <el-col :span="3" :offset="0">以上需要预警</el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="预警等级" prop="level">
              <el-switch
                v-model="item.isLevel"
                :active-value="true"
                :inactive-value="false"
                @change="(val) => switchChange(val, index)"
              >
              </el-switch>
            </el-form-item>
            <el-form-item v-if="item.isLevel" size="normal">
              <Level :items="item.levels"></Level>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="btns" @click="addClick"><i class="el-icon-plus"></i>新增</div>
      <span slot="footer">
        <el-button type="primary" @click="$emit('submit', ruleList)"
          >确定</el-button
        >
        <el-button @click="$emit('close')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Level from '../components/Level.vue'
export default {
  name: 'indexDialog',
  components: {
    Level
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      title: '',
      form: {},
      ruleList: [
        {
          dateType: '',
          eventType: '',
          num: '',
          isLevel: true,
          levels: [{ name: '', min: '', max: '', imageUrl: '' }]
        }
      ],
      options_time: [
        { label: '一个月', value: 1 },
        { label: '一个季度', value: 2 },
        { label: '特定时段', value: 3 }
      ],
      options_event: [
        { label: '偷盗累事件', value: 1 },
        { label: '治安类事件', value: 2 }
      ]
    }
  },
  watch: {
    visible() {}
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val?.id) {
          let ruleList = []
          let list = this.data.warningRuleThresholdList
          this.title = this.data.ruleStatus == 1 ? '规则配置' : '激活'

          if (list?.length) {
            list.map((i) => {
              let levels = []
              if (i.warningRuleLevelList.length) {
                i.warningRuleLevelList.map((j) => {
                  levels.push({
                    name: j.levelName,
                    min: j.beginInterval,
                    max: j.endInterval,
                    imageUrl: j.fileUrl
                  })
                })
              }

              ruleList.push({
                id: i?.id,
                dateType: i.warningRange,
                eventType: i.eventType,
                num: i.warningThreshold,
                isLevel: i.ruleLevelStatus == 1 ? true : false,
                levels
              })
            })
          }
          this.ruleList = ruleList
        }
      }
    }
  },
  methods: {
    addClick() {
      this.ruleList.push({
        dateType: '',
        eventType: '',
        num: '',
        isLevel: true,
        levels: [{ name: '', min: '', max: '', imageUrl: '' }]
      })
      console.log('this.ruleList: ', this.ruleList)
    },
    switchChange(val, index) {
      if (!val) return
      this.ruleList[index].levels = [
        { name: '', min: '', max: '', imageUrl: '' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.indexDialog {
  ::v-deep .el-form {
    .el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .rules {
    padding: 10px;
    border: 1px solid #eee;
    margin: 10px 0;
  }
  .btns {
    text-align: center;
    border: 1px dotted #ddd;
    padding: 5px 0;
    i {
      margin-right: 5px;
      font-weight: bold;
    }
  }
}
</style>